<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>现场签到</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../../css/wx/mui.min.css">
    <link rel="stylesheet" href="../../../css/wx/app.css">
    <link rel="stylesheet" href="../../../css/wx/icons-extra.css"/>
    <link rel="stylesheet" href="../../../css/wx/style.css"/>
    <link rel="stylesheet" href="../../../css/wx/wx-iconfont.css"/>
    <script type="text/javascript">
        var pageConfig = {
            jss: ["app/xcqd/scene"],
            cb: function (o) {
                app.pageModule('scene', o);
            }
        };
    </script>
    <script data-main="../../../js/wx/public/config" src="../../../js/require.js"></script>

    <style>

        .signature-pad--body {
            position: relative;
            -webkit-box-flex: 1;
            width: 100%;
            height: 180px;
            flex: 1;
            border: 1px solid #f4f4f4;
        }

        .signature-pad--body canvas {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 4px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
        }

        .mui-input-row.mui-checkbox.mui-left:after {
            height: 0;
        }

        .potoImg {
            overflow: auto;
        }

        .potoImg ul li {
            float: left;
            margin-left: 6px;
            margin-bottom: 6px;
        }

        .mui-scroll ul {
            margin-left: -6px;
        }

        .writen {
            position: absolute;
            z-index: 999;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 86%;
            height: 50%;
            margin: auto;
        }

        .writen > .mui-row {
            text-align: center;
            margin-top: 10px;
        }

        .writen > .mui-row button {
            color: #fff;
        }

        .writen > .mui-row button:first-child {
            background-color: #FFB400;
            border-color: #FFB400;
        }

        .cousterWi p {
            flex: 1;
        }

        .cousterWi span {
            font-size: 24px;
            color: #FF7100;
        }

        .tab2 .mui-table-view-cell span.puliColor_font {
            color: #FF7100;
        }

        .mui-scroll-wrapper {
            bottom: 58px;
        }

        .mui-input-group .mui-input-row.flex-scene label {
            padding: 0;
        }

        .mui-input-group .mui-input-row.mui-checkbox label {
            padding: 11px 0;
        }

        .mui-checkbox input[type=checkbox] {
            right: 0;
            top: 6px;
        }

        .mui-input-group .mui-input-row {
            height: inherit;
        }

        .padTop {
            padding: 6px 0;
        }

        select {
            font-size: 14px;
        }

        .flex-scene {
            display: flex;
        }

        textarea {
            /*position:fixed;*/
            height: 1.6rem;
            /*width:150px;*/
            /*margin-top: 100px;*/
            resize: none;
            /*overflow:hidden;*/
            -webkit-tap-highlight-color: red;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
        }

        .mui-scroll {
            z-index: 10;
        }

        p,span,label{
            font-size: 14px !important;
        }

    </style>
</head>

<body>
<div id="scene1" class="mui-content">
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
            <div>
                <!--class="mui-card reserved"-->
                <div class="mui-card">
                    <div class="mui-card-header">
                        <p><i class="iconfont icon icon-02 secondColor_font" style="margin-right: 5px;"></i>
                            <small style="font-size: 13px;">{{des.MMRFDOCNO}}</small>
                        </p>
                        <small class="secondColor_font" style="font-size: 13px">{{des.MMRFDOCDATE}}</small>
                    </div>
                    <div class="mui-card-content">
                        <div class="mui-card-content-inner">
                            <div class="mui-row">
                                <div class="mui-col-xs-12">
                                    <p><span>客户名称：</span>{{des.GWAKL004}}</p>
                                </div>
                                <div class="mui-col-xs-12">
                                    <p><span>联系人：</span>{{des.MMRD010}} {{des.MMRD011}}</p>
                                </div>
                                <div class="mui-col-xs-12 flex-scene">
                                    <p style="flex: 0 0 20%;"><span>客户地址：</span></p>
                                    <p style="flex: 0 0 75%;">{{des.GWAK028}}</p>
                                    <div class="addressIcon">
                                        <a href="javascript:;" class="secondColor_font"><i
                                                class="iconfont icon icon-03"></i></a>
                                    </div>
                                </div>
                                <div class="mui-col-xs-12">
                                    <p><span>提报时间：</span>{{des.MMRDDOCDATE}}</p>
                                </div>
                                <div class="mui-col-xs-12">
                                    <p><span>受理时间：</span>{{des.MMRD022}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mui-card-footer">
                        <span class="danger_font">{{des.MMRD019|MMRD019STATUS}}</span>
                    </div>
                </div>

                <div class="tab2 scene">
                    <div class="mui-card">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell"><span>设备：</span>{{des.MMRF003}}/{{des.GWAML003}}</li>
                            <li class="mui-table-view-cell" @tap.stop="showDetail"><span>序号：</span>{{des.MMRF004}}</li>
                            <li class="mui-table-view-cell"><span>故障：</span>{{des.MMRLL003}}</li>
                            <li class="mui-table-view-cell"><span>问题描述：</span>
                                <textarea class="riWid"
                                          v-model="des.MMRG010"
                                          placeholder="请输入问题描述"></textarea>
                            </li>
                            <li class="mui-table-view-cell flex-scene">
                                <span>问题照片：</span>
                                <div class="wf-imageUpdate">
                                    <div class="tackPoto">
                                        <div class="div-autoline-boxDiv">
                                            <template v-for="(img,inx) in imgs">
                                                <div class="div-autoline-parent">
                                                    <div class="child">
                                                        <i @tap.stop="delimg(inx)"
                                                           class="mui-icon mui-icon-closeempty posIcon"></i>
                                                        <img :src="img.img">
                                                    </div>
                                                </div>
                                            </template>
                                            <div v-show="imgs.length<9" @tap.stop="addImgs" class="div-autoline-parent">
                                                <div class="child start"><i class="icon iconfont icon-05"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell"><span>计划到达时间： </span>{{des.MMRF009}}</li>
                            <li class="mui-table-view-cell flex-scene">
                                <label>签到地点：</label>
                                <input v-model="des.MMRG008" type="text" disabled="disabled"/>
                            </li>
                            <li class="mui-table-view-cell flex-scene">
                                <label>签到时间：</label>
                                <input v-model="des.MMRG007" type="datetime" disabled="disabled"/>
                            </li>
                            <!--<li class="mui-table-view-cell flex-scene">-->
                            <!--<label>结束时间：</label>-->
                            <!--<input type="datetime"/>-->
                            <!--</li>-->
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>


</div>
<div class="footBtn flex-scene">
    <button type="button" class="puliColor_bg" id="btnSignIn">现场签到</button>
    <button type="button" class="secondColor_bg" id="btn2">保存</button>
</div>

<!--现场签到-弹出层-->
<div class="returnCont modal1" style="display: none;">
    <div class="main">您确定到达现场？</div>
    <div class="foot">
        <a id="btnSignIn_sure" href="javascript:;" class="puliColor_font conBtn">确定</a>
        <a id="btnSignIn_cancel" href="javascript:;">取消</a>
    </div>
</div>
<!--签到成功-弹出层-->
<div class="returnCont modal2" style="display: none;">
    <div class="header puliColor_font">
        <span class="iconfont icon icon-06 puliColor_font"></span> 签到成功
    </div>
    <div class="main">地址：<span id="nAddress"></span></div>
    <div class="foot">
        <a id="btnSignIn_succ" class="puliColor_font conBtn2">确定</a>
    </div>
</div>

</body>

</html>